<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form ref="ruleForm" style="margin-top: 30px;" :model="admin" label-width="100px">
          <el-form-item label="姓名" prop="blogTitle">
            <el-input v-model="admin.name" />
          </el-form-item>
          <el-form-item label="头像" prop="header">
            <el-upload
              v-loading="imgLoading"
              element-loading-text="图片上传中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="#fff"
              element-
              class="avatar-uploader"
              :action="uploadUrl"
              :headers="headers"
              :show-file-list="false"
              :on-success="handleUploadSuccess"
              :before-upload="imageUploading"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="admin.nickname" />
          </el-form-item>
          <el-form-item label="签名" prop="signature">
            <el-input v-model="admin.signature" type="textarea" />
          </el-form-item>
          <el-form-item label="密码" prop="username">
            <el-button type="primary" @click="updatePwd">修改密码</el-button>
          </el-form-item>
          <el-form-item label="备注" prop="comment">
            <el-input v-model="admin.comment" />
          </el-form-item>
          <el-form-item label="登录用户名" prop="username">
            <el-input v-model="admin.username" />
          </el-form-item>
          <el-form-item label="提交" label-width="100px">
            <el-button type="primary" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-calendar v-model="dateValue" /></el-col>
    </el-row>
    <el-dialog
      v-if="dialogVisible"
      title="更新管理员密码"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <admin-update-password :admin-user="admin" @closeUpdateDialog="closeUpdateDialog" />
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import adminApi from '@/api/admin'
import adminUpdatePassword from './admin-update-password'
export default {
  name: 'AdminUpdate',
  components: {
    adminUpdatePassword
  },
  data() {
    return {
      admin: {

      },
      headers: {
        Authorization: getToken()
      },
      imageUrl: '',
      uploadUrl: process.env.VUE_APP_UPLOAD_URL,
      dateValue: new Date(),
      dialogVisible: false,
      imgLoading: false
    }
  },
  created() {
    this.getAdmin()
  },
  methods: {
    // 关闭更新弹窗
    closeUpdateDialog() {
      this.dialogVisible = false
    },
    // 修改密码
    updatePwd() {
      this.dialogVisible = true
      this.getAdmin()
    },
    submitForm() {
      const loading = this.$loading({
        lock: true,
        text: '查询中请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      adminApi.update(this.admin).then(res => {
        if (res.code === 200) {
          this.getAdmin()
          loading.close()
          this.$message.success('更新成功')
          const { name, header, comment, signature, username } = res.data
          this.$store.commit('SET_COMMENT', comment)
          this.$store.commit('SET_SIGNATURE', signature)
          this.$store.commit('SET_NAME', name)
          this.$store.commit('SET_AVATAR', header)
          this.$store.commit('SET_USERNAME', username)
        }
      })
    },
    getAdmin() {
      adminApi.getAdmin().then(res => {
        if (res.code === 200) {
          this.admin = res.data
          this.imageUrl = res.data.header
        }
      })
    },
    handleUploadSuccess(res, file) {
      this.imageUrl = res.data
      this.admin.header = res.data
      this.imgLoading = false
    },
    imageUploading() {
      this.imgLoading = true
    }
  }
}
</script>

<style scoped>
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    background-size: cover;
    display: block;
  }
</style>
